<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>通讯录</title>
    <link href="fonts/iconfont.css" rel="stylesheet"/>
    <link href="css/bass.css" rel="stylesheet"/>
    <link href="css/index.css" rel="stylesheet"/>
</head>
<body>
        <nav class="nav-bar nav-bar-tab">
            <a href="index.html" class="nav-tab-item">
                <span class="nav-icon icon-uniE90A"></span>
                <span class="nav-tab-label">首页</span>
            </a>
            <a href="contact.html" class="nav-tab-item nav-active">
                <span class="nav-icon icon-uniE919"></span>
                <span class="nav-tab-label">通讯录</span>
            </a>
            <a href="chatrecord.html" class="nav-tab-item">
                <span class="nav-icon icon-uniE903"><span class="nav-badge">1</span></span>
                <span class="nav-tab-label">会话</span>
            </a>
             <a href="userPu.html" class="nav-tab-item">
                <span class="nav-icon icon-uniE90B"></span>
                <span class="nav-tab-label">我的</span>
            </a>
        </nav>
        <!--通讯录搜索栏-->
		<div class="contact">
        	<div class="contact-search">
            	<i class="icon-uniE90F"></i>
            	<input type="search" placeholder="搜索">
             </div>
		<!--通讯录搜索栏end-->
        <!--联系人-->
			<div class="contact-content">
           		<div class="Letter-jump">
                        <a name="A" class="letter-a">A</a>	
                    <a href="#">
                        <img src="images/ts1.jpg">
                        <span class="user-name">安琪拉<i class="icon-vip0"></i></span>
                    </a>               
                    <a href="#">                                    
                        <img src="images/ts2.jpg">
                        <span class="user-name">安然
                            <i class="icon-vip2"></i>
                            <i class="ba-color7 icon-uniE966"></i>
                        </span>
                    </a>            
                </div>           
                <div class="Letter-jump">
                    <a name="B" class="letter-a">B</a>   
                    <a href="#">                                    
                        <img src="images/ts3.jpg">
                        <span class="user-name">白百合<i class="icon-vip3"></i></span>
                    </a>               
                    <a href="#">                                    
                        <img src="images/ts4.jpg">
                        <span class="user-name">碧琳<i class="icon-vip4"></i></span>
                    </a>    
                </div> 
                <div class="Letter-jump">
                    <a name="C" class="letter-a">C</a>       
                    <a href="#">                                    
                        <img src="images/ts6.jpg">
                        <span class="user-name">陈长荣<i class="icon-vip5"></i></span>
                    </a>               
                    <a href="#">                                    
                        <img src="images/ts5.jpg">
                        <span class="user-name">陈小春<i class="icon-vip6"></i></span>
                    </a>    
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">陈华春<i class="icon-vip6"></i></span>
                    </a>     
                </div>    
                <div class="Letter-jump">
                    <a name="D" class="letter-a">D</a>    
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>                
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>               
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>             
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a> 
                </div>   
                <div class="Letter-jump">
                    <a name="E" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>     
                <div class="Letter-jump">
                    <a name="F" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>     
                <div class="Letter-jump">
                    <a name="G" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>     
                <div class="Letter-jump">
                    <a name="H" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>     
                <div class="Letter-jump">
                    <a name="I" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>     
                <div class="Letter-jump">
                    <a name="J" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>      
                <div class="Letter-jump">
                    <a name="K" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>     
                <div class="Letter-jump">
                    <a name="L" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>    
                <div class="Letter-jump">
                    <a name="N" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>    
                <div class="Letter-jump">
                    <a name="M" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>     
                <div class="Letter-jump">
                    <a name="O" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>     
                <div class="Letter-jump">
                    <a name="P" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>     
                <div class="Letter-jump">
                    <a name="Q" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>      
                <div class="Letter-jump">
                    <a name="R" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>       
                <div class="Letter-jump">
                    <a name="S" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>   
                <div class="Letter-jump">
                    <a name="T" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>   
               <div class="Letter-jump">
                    <a name="U" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>    
                <div class="Letter-jump">
                    <a name="V" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>    
                <div class="Letter-jump">
                    <a name="W" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>   
                <div class="Letter-jump">
                    <a name="X" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div>   
                <div class="Letter-jump">
                    <a name="Y" class="letter-a">Z</a>
                    <a href="#">                                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
                </div> 
                <div class="Letter-jump">
                    <a name="Z" class="letter-a">Z</a>
                    <a href="#">           		                    
                        <img src="images/user-img.png">
                        <span class="user-name">大章鱼<i class="icon-vip6"></i></span>
                    </a>  
           	    </div>                
			</div>
            <!--联系人end-->
            <!--字母检索列表-->
            <div class="letter-search">
            	<ul>
                	<a href="#A"><li>A</li></a>
                    <a href="#B"><li>B</li></a>
                    <a href="#C"><li>C</li></a>
                    <a href="#D"><li>D</li></a>
                    <a href="#E"><li>E</li></a>
                    <a href="#F"><li>F</li></a>
                    <a href="#G"><li>G</li></a>
                    <a href="#H"><li>H</li></a>
                    <a href="#I"><li>I</li></a>
                    <a href="#J"><li>J</li></a>
                    <a href="#K"><li>K</li></a>
                    <a href="#L"><li>L</li></a>
                    <a href="#N"><li>N</li></a>
                    <a href="#M"><li>M</li></a>
                    <a href="#O"><li>O</li></a>
                    <a href="#P"><li>P</li></a>
                    <a href="#Q"><li>Q</li></a>
                    <a href="#R"><li>R</li></a>
                    <a href="#S"><li>S</li></a>
                    <a href="#T"><li>T</li></a>
                    <a href="#U"><li>U</li></a>
                    <a href="#V"><li>V</li></a>
                    <a href="#W"><li>W</li></a>
                    <a href="#X"><li>X</li></a>
                    <a href="#Y"><li>Y</li></a>
                    <a href="#Z"><li>Z</li></a>
                  </ul>
                </div>      
                  <!--字母检索列表end-->  
          </div>
</body>
</html>






























